<template>
  <div class="container">
    <el-card>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="U本位永续" name="first">
          <el-card>
            <div class="trade-panel">
              <h2>BTC/USDT</h2>
              <div class="trade-settings">
                <el-select v-model="leverage" placeholder="逐仓" style="width: 350px">
                  <el-option label="125.0X" value="125"></el-option>
                </el-select>
                <el-select v-model="orderType" placeholder="委托类型" style="width: 350px">
                  <el-option label="限价委托" value="limit"></el-option>
                </el-select>
                <el-input v-model="price" placeholder="价格" style="width: 300px;"></el-input>
                <el-input-number v-model="quantity" :min="0" label="数量(BTC)" style="width: 100px;"></el-input-number>
              </div>
              <div class="trade-actions">
                <el-button type="primary" @click="buy">买入/做多</el-button>
                <el-button type="danger" @click="sell">卖出/做空</el-button>
              </div>
              <div class="trade-info">
                <p>资金费率: {{ fundingRate }}%</p>
                <p>持仓量(USTD): {{ position }}</p>
                <p>最高价: {{ highPrice }}</p>
                <p>最低价: {{ lowPrice }}</p>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="BTC本位永续" name="second">BTC本位永续</el-tab-pane>
        <el-tab-pane label="交割" name="third">交割</el-tab-pane>
        <el-tab-pane label="轮证" name="fourth">轮证</el-tab-pane>
        <el-tab-pane label="模拟" name="five">模拟</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeName = ref('first')
const leverage = ref('125')
const orderType = ref('limit')
const price = ref(0)
const quantity = ref(1)
const fundingRate = -0.018
const position = 65321005
const highPrice = 27564.90
const lowPrice = 25130.30

const handleClick = (tab, event) => {
  console.log(tab, event)
}

const buy = () => {
  console.log(`买入价格: ${price.value}, 数量: ${quantity.value} BTC`)
}

const sell = () => {
  console.log(`卖出价格: ${price.value}, 数量: ${quantity.value} BTC`)
}
</script>

<style scoped>
.container {
  margin-top: 50px;
  width: 98%;
}
.trade-panel {
  margin: 20px;
}
.trade-settings {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.trade-actions {
  margin-bottom: 20px;
}
.trade-info {
  margin-bottom: 20px;
}
</style>